<!-- 二维码信息查询 -->
<template>
	<div class="dashboard-container">
		<div class="form-container">
			<el-form :model="form" label-width="auto" :inline="true"
				><el-form-item :label="$t('message.deviceCheck.pageDeviceType')">
					<el-select
						v-model="form.measurementPoint"
						:placeholder="$t('message.form.pageSelectHolder')"
						style="width: 200px"
						class="custom-select"
						size="default"
					>
						<el-option v-for="item in measurementOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item :label="$t('message.deviceCheck.pageSubstationChange')">
					<el-select
						v-model="form.substation"
						:placeholder="$t('message.form.pageSelectHolder')"
						style="width: 200px"
						class="custom-select"
						size="default"
					>
						<el-option v-for="item in substationOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item :label="$t('message.codeNewsQuery.pageDeviceChange')">
					<el-select
						v-model="form.measurementPoint"
						:placeholder="$t('message.form.pageSelectHolder')"
						style="width: 200px"
						class="custom-select"
						size="default"
					>
						<el-option v-for="item in measurementOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button size="default" type="primary" @click="handleSearch">{{ $t('message.form.pageQuery') }}</el-button>
					<el-button size="default" type="warning" @click="handleExport">{{ $t('message.form.pageExport') }}</el-button>
					<el-button size="default" type="success" @click="handlePrint">{{ $t('message.form.pagePrint') }}</el-button>
				</el-form-item>
			</el-form>
		</div>

		<div class="table-container">
			<TableCustom :indexIsShow="true" :total="total" :hasToolbar="false" :tableData="tableData" :tableOption="tableOption">
				<template #operate="{ scope }">
					<span class="table-code" @click="handleCode">生成二维码 </span>
				</template>
			</TableCustom>
		</div>

		<PrintComponent ref="printComponentRef"> </PrintComponent>

		<el-dialog v-model="dialogVisible" width="45%" draggable overflow destroy-on-close>
			<div>
				<!-- 打印、导出、邮件 -->
				<el-row class="info-container">
					<el-col :xs="24" :sm="16" :md="15">
						<div class="table-wrapper">
							<table class="info-table">
								<tr>
									<th class="table-header">设备类型</th>
									<td class="table-data">{{ deviceInfo.deviceType }}</td>
								</tr>
								<tr>
									<th class="table-header">设备类型ID</th>
									<td class="table-data">{{ deviceInfo.deviceTypeId }}</td>
								</tr>
								<tr>
									<th class="table-header">子站名</th>
									<td class="table-data">{{ deviceInfo.substationName }}</td>
								</tr>
								<tr>
									<th class="table-header">子站ID</th>
									<td class="table-data">{{ deviceInfo.substationId }}</td>
								</tr>
								<tr>
									<th class="table-header">设备名</th>
									<td class="table-data">{{ deviceInfo.deviceName }}</td>
								</tr>
								<tr>
									<th class="table-header">设备ID</th>
									<td class="table-data">{{ deviceInfo.deviceId }}</td>
								</tr>
							</table>
						</div>
					</el-col>
					<el-col :xs="24" :sm="8" :md="9">
						<div class="qr-wrapper">
							<div class="qr-code">
								<img :src="qrCodeUrl" alt="设备二维码" class="qr-image" />
								<div v-if="!qrCodeUrl" class="qr-placeholder">
									<i class="el-icon-picture-outline"></i>
									<span>暂无二维码</span>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>

			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="dialogVisible = false">提交</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { useI18n } from 'vue-i18n';
import TableCustom from '../../components/table/index.vue';
import PrintComponent from '../../components/print/index.vue';
import { onMounted, defineComponent, reactive, toRefs, computed, ref } from 'vue';

export default defineComponent({
	name: 'codeNewsQuery',

	components: { TableCustom, PrintComponent },

	setup(props, { emit }) {
		const { t } = useI18n();
		const state = reactive({
			total: 0,
			pageSize: 10,
			pageNum: 1, // 表格相关
			tableData: [
				{
					name: '逆变器1',
				},
			],
			form: {
				substation: '',
				device: '',
				date: '',
				radio: 1,
				measurementPoint: '',
			},
			substationOptions: [
				{ value: '1', label: '子站1' },
				{ value: '2', label: '子站2' },
				{ value: '3', label: '子站3' },
			],
			deviceOptions: [
				{ value: '1', label: '逆变器1' },
				{ value: '2', label: '逆变器2' },
				{ value: '3', label: '逆变器3' },
			],
			measurementOptions: [
				{ value: '1', label: '发电量' },
				{ value: '2', label: '电压' },
				{ value: '3', label: '电流' },
			],
			dialogVisible: false,
			deviceInfo: {
				deviceType: '光伏站',
				deviceTypeId: '50',
				substationName: '河南超威一期',
				substationId: 'CONHKS01CWEQ',
				deviceName: '河南超威一期',
				deviceId: 'DEVHKS01CWEQGF',
			},
			qrCodeUrl: 'https://img2.baidu.com/it/u=766384429,1005647008&fm=253&fmt=auto&app=138&f=GIF?w=500&h=500',
		});

		const handleSearch = () => {
			console.log('Form submitted:', state.form);
		};

		// table表头tableOption国际化
		const tableOption = computed(() => [
			{ prop: 'name', label: t('message.deviceCheck.pageDeviceType') },
			{ prop: 'name', label: t('message.codeNewsQuery.pageSubstationName') },
			{ prop: 'name', label: t('message.codeNewsQuery.pageSubstationID') },
			{ prop: 'name', label: t('message.codeNewsQuery.pageDeviceName') },
			{ prop: 'name', label: t('message.codeNewsQuery.pageDeviceID') },
			{ prop: 'operate', label: t('message.table.pageOperate'), slotName: 'operate' },
		]);

		// 打印操作
		const printComponentRef = ref();
		const handlePrint = () => {
			if (printComponentRef.value) {
				printComponentRef.value.printContent();
			}
		};

		// 导出数据
		const handleExport = () => {
			console.log('Exporting data...');

			// var a = document.createElement('a');
			// a.href = BASE_API + '/window/api/pdfinfo/scheduleExportPDF?eventId=' + this.eventId;
			// a.click();
		};

		// 生成二维码操作
		const handleCode = (row: any) => {
			console.log(row);
			state.dialogVisible = true;
		};

		onMounted(() => {});

		return {
			handleCode,
			handleSearch,
			tableOption,
			handlePrint,
			handleExport,
			...toRefs(state),
			printComponentRef,
		};
	},
});
</script>

<style lang="scss" scoped>
.table-code {
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 5px;
}

.info-container {
	border: 1px solid #02aaf8;

	.table-wrapper {
		padding: 0.6rem;
	}

	.info-table {
		width: 100%;
		border-collapse: collapse;
		font-size: 0.9rem;

		.table-header {
			border: 1px solid #02aaf8;
			padding: 0.5rem;
			text-align: center;
			width: 35%;
			font-weight: normal;
			color: #000;
			font-weight: 500;
		}

		.table-data {
			border: 1px solid #02aaf8;
			padding: 0.5rem;
			text-align: center;
			color: #000;
			font-weight: 500;
		}
	}

	.qr-wrapper {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		border-left: 1px dashed #02aaf8;
	}

	.qr-code {
		position: relative;
		width: 100%;
		max-width: 180px;
		aspect-ratio: 1/1;
		background: white;
		padding: 8px;
		border-radius: 4px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

		.qr-image {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}

		.qr-placeholder {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #909399;
			background: #f5f7fa;

			i {
				font-size: 36px;
				margin-bottom: 8px;
			}
		}
	}
}
</style>
